<template>
   <div class="updatebuilding-container">
          <div class="updatebuilding-top-container">
              <el-page-header @back="goBack" content="歌單页面">
              </el-page-header>
          </div>
      <el-form  ref="form" status-icon  :rules="rules" :model="form" label-width="80px">
        <el-form-item label="歌單名" prop="title">
          <el-input 
          v-model="form.title" 
          style="width:95%"
          ></el-input>
        </el-form-item>
        
         <el-form-item label="簡介" prop="password">
          <el-input
            
            style="width:95%"
            v-model="form.introduction"
            type="textarea"
            >
          </el-input>
        </el-form-item>

          <el-form-item label="歌曲Id" prop="songId">
          <el-input  v-model="form.songId" style="width:95%"></el-input>
        </el-form-item>

        <el-form-item label="風格" prop="style">
          <el-input  v-model="form.style" style="width:95%"></el-input>
        </el-form-item>

        

        <div class="button-container">
          
            <el-button type="primary" @click="submit()" >提交</el-button>
          
        </div>
      </el-form>
    </div>
</template>

<script>
export default {
    name:'addSongList',
    data() {
      return {
         choice:'新增用戶',
         IsOk:'',
         form: {
            title:'',
            introduction:'',
            style:'',
            songId:'',

          },
         rules:{
           /*
            SongListname: [
                { required: true, message: '请输入用戶名', trigger: 'blur' },
                { min: 5, max: 100, message: '长度在 5 个字符以上', trigger: 'blur' }
              ],
            password:[
                { required: true, message: '请输入密碼', trigger: 'blur' },
                { min: 6, max: 100, message: '长度在 8 个字符以上', trigger: 'blur' }
            ]
            */
         }
      
     }
    },
    methods: {
        async submit(){
          let that=this;
          //update....
          
         if(this.$route.query.do=='add'){
          //add
          console.log('add??');
          await this.$axios.get("http://localhost:8081/addSongList?"+
                              "title="+this.form.title+
                              "&introduction="+this.form.introduction+
                              "&songId="+this.form.songId+
                              "&style="+this.form.style
                              )
            .then((result) => {
                //console.log(result.data);
                that.$router.push({path:'/homepage/goodsTypeInfo',query:{status:result.data}})
                return;
            }).catch((err) => {
              
            });
           }
          else
          {
           await this.$axios.get("http://localhost:8081/updateSongList?"+
                                 "title="+this.$route.query.title+
                                 "&introduction="+this.form.introduction+
                                 "&songId="+this.form.songId+
                                 "&id="+this.$route.query.id
                                 )
            .then((result) => {
                //console.log(result.data);
                that.$router.push({path:'/homepage/goodsTypeInfo',query:{status:result.data}})
              
               
            }).catch((err) => {
              
            });
          }
        },
        goBack(){
          this.$router.push('/homepage/goodsTypeInfo');
        },
        load(){
          //console.log(this.$route);
          if(this.$route.query)
          {
            this.form.title=this.$route.query.title;
            this.form.introduction=this.$route.query.introduction;
            this.form.songId=this.$route.query.songId
            this.form.style=this.$route.query.style
          }
        }
    },
    mounted() {
      this.load();
    },

}
</script>

<style>

   .updatebuilding-container{
     width: 80%;
     padding: 20px;
     
   }
   .updatebuilding-top-container{
     width: 100%;
     height: 50px;
     padding-left: 20px;
   }
   .el-textarea__inner{
     height: 200px;
   }
</style>